import React from 'react';
import Button from './Button';

const ButtonDoc: React.FC = () => {
  return (
    <div>
      <h1>按钮组件</h1>
      
      <h2>组件说明</h2>
      <p>按钮是用户界面中最基本的元素之一，用于触发操作或选择选项。`avc-ui` 的按钮组件提供了多种样式和尺寸，以适应不同的应用场景。</p>
      
      <h3>何时使用</h3>
      <ul>
        <li>当需要提供一个可点击的按钮时。</li>
        <li>当需要根据不同的操作类型（如主要操作、次要操作、危险操作等）展示不同样式的按钮时。</li>
        <li>当需要调整按钮的尺寸或状态（如禁用、加载状态）时。</li>
      </ul>
      
      <h2>代码演示</h2>
      
      <h3>基础用法</h3>
      <div style={{ marginBottom: '20px' }}>
        <Button>默认按钮</Button>
        <Button type="primary">主要按钮</Button>
        <Button type="secondary">次要按钮</Button>
        <Button type="danger">危险按钮</Button>
      </div>
      <pre><code className="language-tsx">{
`import { Button } from 'avc-ui'

const App = () => {
  return (
    <>
      <Button>默认按钮</Button>
      <Button type="primary">主要按钮</Button>
      <Button type="secondary">次要按钮</Button>
      <Button type="danger">危险按钮</Button>
    </>
  )
}`
      }</code></pre>
      
      <h3>不同尺寸</h3>
      <div style={{ marginBottom: '20px' }}>
        <Button size="small">小按钮</Button>
        <Button>中等按钮</Button>
        <Button size="large">大按钮</Button>
      </div>
      <pre><code className="language-tsx">{
`import { Button } from 'avc-ui'

const App = () => {
  return (
    <>
      <Button size="small">小按钮</Button>
      <Button>中等按钮</Button>
      <Button size="large">大按钮</Button>
    </>
  )
}`
      }</code></pre>
      
      <h3>禁用状态</h3>
      <div style={{ marginBottom: '20px' }}>
        <Button disabled>禁用按钮</Button>
        <Button type="primary" disabled>禁用的主要按钮</Button>
      </div>
      <pre><code className="language-tsx">{
`import { Button } from 'avc-ui'

const App = () => {
  return (
    <>
      <Button disabled>禁用按钮</Button>
      <Button type="primary" disabled>禁用的主要按钮</Button>
    </>
  )
}`
      }</code></pre>
      
      <h3>加载状态</h3>
      <div style={{ marginBottom: '20px' }}>
        <Button loading>加载中</Button>
        <Button type="primary" loading>加载中的主要按钮</Button>
      </div>
      <pre><code className="language-tsx">{
`import { Button } from 'avc-ui'

const App = () => {
  return (
    <>
      <Button loading>加载中</Button>
      <Button type="primary" loading>加载中的主要按钮</Button>
    </>
  )
}`
      }</code></pre>
      
      <h2>API</h2>
      <table>
        <thead>
          <tr>
            <th>属性</th>
            <th>说明</th>
            <th>类型</th>
            <th>默认值</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>`type`</td>
            <td>按钮类型，可选值为 `default`, `primary`, `secondary`, `danger`</td>
            <td>string</td>
            <td>`default`</td>
          </tr>
          <tr>
            <td>`size`</td>
            <td>按钮尺寸，可选值为 `small`, `medium`, `large`</td>
            <td>string</td>
            <td>`medium`</td>
          </tr>
          <tr>
            <td>`disabled`</td>
            <td>是否禁用按钮</td>
            <td>boolean</td>
            <td>`false`</td>
          </tr>
          <tr>
            <td>`loading`</td>
            <td>是否显示加载状态</td>
            <td>boolean</td>
            <td>`false`</td>
          </tr>
          <tr>
            <td>`onClick`</td>
            <td>点击按钮时的回调函数</td>
            <td>function</td>
            <td>-</td>
          </tr>
        </tbody>
      </table>
      
      <h3>其他属性</h3>
      <p>按钮组件还支持所有原生 HTML button 元素的属性。</p>
    </div>
  );
};

export default ButtonDoc;